import React, { useState, useEffect } from 'react'
import '../css/home.css'
import { Tabs } from 'antd-mobile'
import { Sticky, Button } from 'react-vant';
import { ArrowLeft, ShareO } from '@react-vant/icons';
import { useThrottleFn } from 'ahooks'
import { useNavigate } from 'react-router-dom'
import Hoc from '../Hoc'
export default function Home() {
    const nav = useNavigate()
    const tabItems = [
        { key: '1', title: '就医服务', text: 1 },
        { key: '2', title: '重点科室', text: 2 },
        { key: '3', title: '患者评价', text: 3 },
        { key: '4', title: '医院简介', text: 4 },
    ]

    const tabHeight = 20
    const [activeKey, setActiveKey] = useState('1')

    const { run: handleScroll } = useThrottleFn(
        () => {
            let currentKey = tabItems[0].key
            for (const item of tabItems) {
                const element = document.getElementById(`anchor-${item.key}`)
                if (!element) continue
                const rect = element.getBoundingClientRect()
                if (rect.top <= tabHeight) {
                    currentKey = item.key
                } else {
                    break
                }
            }
            setActiveKey(currentKey)
        },
        {
            leading: true,
            trailing: true,
            wait: 100,
        }
    )
    useEffect(() => {
        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])
    return (
        <div className='body'>
            <Sticky>
                <div className='position'>
                    <Hoc title='医院详情页'></Hoc>
                    <div className='xiangxi'>
                        <div className='imgs'>
                            <img src="/img/1.jpg" className='img' />
                        </div>
                        <div className='con'>
                            <div className='home_name'>北京大学第一医院</div>
                            <div className='home_level'><span className='type'>三甲甲等</span><span className='hoipital_type'>综合医院</span><span className='yibao'>非定点医保</span></div>
                            <div className='home_sort'><span className='sort'>综合排名第一</span><span className='keshi1'>内科</span><span className='keshi1'>口腔科</span></div>
                        </div>
                    </div>
                    <div className='{styles.tabsContainer}'>
                        <Tabs
                            activeKey={activeKey}
                            onChange={key => {
                                document.getElementById(`anchor-${key}`)?.scrollIntoView()
                                window.scrollTo({
                                    top: window.scrollY - tabHeight,
                                })
                            }}
                        >
                            {tabItems.map(item => (
                                <Tabs.Tab title={item.title} key={item.key} />
                            ))}
                        </Tabs>
                    </div>
                </div>
            </Sticky>

            <div className='content'>
                {tabItems.map(item => {
                    if (item.title == '就医服务') {
                        return <div key={item.key} onClick={()=>nav('/Reservation')}>
                            <div>
                                <img src="/img/1.jpg" alt="" style={{ width: '100%' }} />
                            </div>
                        </div>
                    } else if (item.title == '重点科室') {
                        return <div key={item.key}>
                            <h2 id={`anchor-${item.key}`}>{item.title}</h2>
                            <div>
                                <img src="/img/1.jpg" alt="" style={{ width: '100%' }} />
                            </div>
                        </div>
                    } else if (item.title == '患者评价') {
                        return <div key={item.key}>
                            <h2 id={`anchor-${item.key}`}>{item.title}</h2>
                            <div>
                                <img src="/img/1.jpg" alt="" style={{ width: '100%' }} />
                            </div>
                        </div>
                    } else if (item.title == '医院简介') {
                        return <div key={item.key}>
                            <h2 id={`anchor-${item.key}`}>{item.title}</h2>
                            <div>
                                <img src="/img/1.jpg" alt="" style={{ width: '100%', height: '100vh' }} />
                            </div>
                        </div>
                    }
                })}
            </div>
        </div >
    )
}
